<template>
  <table-row-detail-dialog ref="detailDialog"
                           dialog-title="自定义弹窗-可拖拽"
                           :draggable="true"
                           dialog-width="500px"
                           @event-fn1="handleFn1"
                           @event-fn2="handleFn2">
    <div class="dialog-body">
      <div>{{id}}</div>
      <div>{{itemData}}</div>
    </div>
  </table-row-detail-dialog>
</template>

<script>
/**
 * 自定义弹窗示例
 */
import TableRowDetailDialog from '@/components/TableRowDetailDialog/index'

import {detail} from "@/api/system/user";

import DetailAction from '@/views/_mixins/detail-action'

export default {
  name: "ItemDetail",
  mixins: [DetailAction],
  components: {
    TableRowDetailDialog,
  },
  props: {},
  data() {
    return {
      id: '', //数据id，用于提交数据
      itemData: null, //详情数据
    }
  },
  computed: {},
  created() {
  },
  methods: {
    show(row) {
      this.id = row.userId;
      this.getDetail(row)
      //自定义弹窗按钮，如弹窗按钮还有更复杂的处理，可以将在table-row-detail-dialog标签上添加:no-footer="false"完全取消底部按键，从弹窗内容中直接添加，自由度最高
      this.$refs.detailDialog.show('', [
        {
          name: '示例按钮1-刷新列表',
          event: 'event-fn1',
          type: 'primary'
        },
        {
          name: '示例按钮2-仅关闭',
          event: 'event-fn2',
          type: ''
        },
      ]);
    },
    /**
     * 获取记录详情
     * 填充表单数据对象
     * */
    getDetail(data) {
      this.id = data.userId;
      detail(this.id).then(res => {
        this.itemData = res
      });
    },
    
    handleFn1() {
      this.$refs.detailDialog.hide();
      this.$emit('data-change')
    },
    handleFn2() {
      this.$refs.detailDialog.hide();
    },
  }
}
</script>

<style lang="scss" scoped>

</style>
